<!-- <attachment>
<filepath: daping/daping/src/components/Flower.vue> -->
<template>
  <div class="flower" :style @click="openFlower">
    <img :src="flowerImage" alt="Flower" />
    <div v-if="isOpen" class="flower-text">
      <h3>{{name}}</h3>
      {{ flowerDescription }}
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import flowerImage from "../assets/flower.svg";
defineProps({
  flowerImage: {
    type: String,
    default: flowerImage,
  },
  name:{
    type: String,
    default: "",
  },
  isOpen: {
    type: Boolean,
    default: false,
  },
  flowerDescription: {
    type: String,
    default: "This is a beautiful flower that blooms when clicked.",
  },
  style:{
    type:Object,
    default:{}
  }
});
const openFlower = () => {
  // isOpen.value = !isOpen.value;
  // Add logic for voice playback if needed
};
</script>

<style scoped>
.flower {
  /* position: absolute;
  bottom: 20px;
  left: 20px; */
  display: flex;
  flex-direction: row;
  cursor: pointer;
  text-align: center;
}

.flower img {
  width: 100px; /* Adjust size as needed */
}

.flower-text {
  margin-left: 10px;
  font-size: 14px;
  color: #333;
  z-index: 999;
  transition: opacity 0.3s ease;
}
</style>
<!-- </attachment> -->
